<template>
	<view class="u-p-20 page">
		<view class="cart-list" v-for="(item,index) in cartList" :key="index">
			<view class="u-p-20 types u-border-bottom item-w">
				<u-checkbox-group>
					<u-checkbox v-model="item.class.selectAll" :name='item.class.id' shape="circle" active-color="#0eb6ff" @change="checkboxChange">
						{{item.class.name}}
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="u-p-20 item-w u-flex " v-for="(val,idx) in item.list" :key='idx'>
				<u-checkbox-group>
					<u-checkbox @change="childrenChange" :name='val.parentId' v-model="val.select" shape="circle" active-color="#0eb6ff"></u-checkbox>
				</u-checkbox-group>
				<cart-item :item='val' :index='index' :idx='idx' @changeNum='changeNum'></cart-item>
			</view>
			<u-gap height="10" bg-color="#f5f5f5"></u-gap>
		</view>
		<u-divider color="#0eb6ff" height='60' class='u-m-b-10' bg-color="#f5f5f5">推荐</u-divider>
		<view class="u-m-t-20 u-flex u-flex-wrap u-row-between">
			<index-list-item v-for="(item,index) in recommendList" :key='index' class="u-m-b-20 recommend-item" vertical :item='item'></index-list-item>
		</view>
		<u-loadmore :status="status" />
		<view class="settlement-style u-flex u-row-right u-border-top" :animation="animationData">
			<view>合计：</view>
			<prices-style :prices="999.9"></prices-style>
			<view class="settlement-btn u-text-center" @click="goPage">结算</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsList
	} from '@/common/data/data.js'
	const animation = uni.requireNativePlugin('animation')
	export default {
		data() {
			return {
				show: false,
				recommendList: [],
				status: 'loadmore',
				animationData: {},
				cartList: [{
						class: {
							name: '生鲜',
								id: 1,
								selectAll: false
						},
						list: [{
								parentId: 1,
								url: '/static/icon/icon6.png',
								name: '新疆小苹果 1.5KG',
								prices: 20.9,
								originalPrice: 30.9,
								unit: '箱',
								label: '特价',
								delivery: '24H发货',
								sold: 888,
								select: false,
								num: 1
							}, {
								parentId: 1,
								url: '/static/icon/icon7.png',
								name: '新疆小苹果 1.5KG',
								prices: 20.9,
								originalPrice: 30.9,
								unit: '箱',
								label: '特价',
								delivery: '24H发货',
								sold: 888,
								select: false,
								num: 1
							},
							{
								parentId: 1,
								url: '/static/icon/icon8.png',
								name: '新疆小苹果 1.5KG',
								prices: 20.9,
								originalPrice: 30.9,
								unit: '箱',
								label: '特价',
								delivery: '24H发货',
								sold: 888,
								select: false,
								num: 1
							},
						]
					},
					{
						class: {
							name: '海鲜',
								id: 2,
								selectAll: false
						},
						list: [{
								parentId: 2,
								url: '/static/icon/icon6.png',
								name: '新疆小苹果 1.5KG',
								prices: 20.9,
								originalPrice: 30.9,
								unit: '箱',
								label: '特价',
								delivery: '24H发货',
								sold: 888,
								select: false,
								num: 1
							}, {
								parentId: 2,
								url: '/static/icon/icon7.png',
								name: '新疆小苹果 1.5KG',
								prices: 20.9,
								originalPrice: 30.9,
								unit: '箱',
								label: '特价',
								delivery: '24H发货',
								sold: 888,
								select: false,
								num: 1
							},
							{
								parentId: 2,
								url: '/static/icon/icon8.png',
								name: '新疆小苹果 1.5KG',
								prices: 20.9,
								originalPrice: 30.9,
								unit: '箱',
								label: '特价',
								delivery: '24H发货',
								sold: 888,
								select: false,
								num: 1
							},
						]
					}
				]
			};
		},
		onNavigationBarButtonTap() {
			this.$toast('点击了删除')
		},
		onLoad() {
			this.recommendList = goodsList
		},
		methods: {
			goPage(){
				uni.navigateTo({
					url:'/pages/confirm-order/confirm-order'
				})
			},
			changeNum(num, index, idx) {
				this.cartList[index].list[idx].num = num
			},
			settlement() {
				let arr = []
				this.cartList.map(item => {
					arr.push(...item.list.filter(val => val.select))
				})
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				if (arr.length) {
					this.show = true
					animation.translateY(-50).opacity(1).step()
					this.animationData = animation.export()
				} else {
					this.show = false
					animation.translateY(50).opacity(0).step()
					this.animationData = animation.export()
				}
			},
			childrenChange(e) {
				this.$nextTick(function() {
					this.cartList = this.cartList.map(item => {
						if (item.class.id == e.name) {
							let arr = item.list.filter(val => {
								return !val.select
							})
							item.class.selectAll = true
							if (arr.length) {
								item.class.selectAll = false
							}
						}
						return item
					})
					this.settlement()
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.cartList = this.cartList.map(item => {
					if (item.class.id == e.name) {
						item.list = item.list.map(val => {
							val.select = e.value
							return val
						})
					}
					return item
				})
				this.settlement()
			},
		},
	}
</script>

<style scoped lang="scss">
	.settlement-btn {
		width: 150rpx;
		padding: 20rpx;
		border-radius: 50rpx;
		background-color: #0eb6ff;
		margin: 0 20rpx;
		color: #FFFFFF;
	}

	.settlement-style {
		position: fixed;
		/* #ifdef H5 */
		bottom: 0px;
		/* #endif */
		/* #ifndef H5 */
		bottom: -50px;
		/* #endif */
		width: 100%;
		height: 100rpx;
		left: 0;
		opacity:0;
		background-color: #FFFFFF;
	}

	page {
		background-color: #F5F5F5;
	}

	.page {
		background-color: #F5F5F5;
	}

	.recommend-item {
		width: 48%;
	}

	.cart-list {
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}

	.types {
		font-weight: 600;
	}

	.item-w {
		width: 100%;
	}

</style>
